<template>
    <div class="btns">
        <ul>
            <li class="btnOne" v-for = "(item, index) of btnList" :key="index">
                <div class="btnName lf" >
                    {{item.name}} 
                    <span style="float:left" class="iconfont" v-html="item.level"></span>
                    <span style="float:right" class="iconfont"  @mouseenter="showDetails(index)" @mouseleave="leave()">&#xe62f;</span>
                    <div v-show="item.seen1" class="contentDiv" v-html="item.content">
                        <span class="iconfont" style="float:right">&#xe65d;</span>
                    </div> 
                </div>
                <div class="btn lf" @click="handleBtnclick(index, item.seen )" :class="{onOffActive : isIndex==index}" v-if="item.showO">
                    <div class="onOff" :class="{onOffG : isIndex == index}"></div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    // :class="item.backG"
    name: 'CommonControlBtn',
    data(){
        return{
            isOnOff : false,
            isIndex : 1, 
            btnList: [
                {name:'气候适宜指数',backG : 'one',      
                content:"<p>一, 气候适宜指数是下列四项指数的平均值</p> <hr/> <p> 二, 在气候适宜评价分析中，多数研究采用气候指数法（舒适度，风寒指数，温湿指数，度假指数）气候指数法的指数模型以实验和统计为基础，具有较强的理论性和客观性，并且可同事选取多个气候指数，共同评价一个地区的气候适宜度，因此该方法常常被采用",         
                showO:false,level:'&#xe6d6;', seen1: false},
                {name:'舒适度指数', backG : 'one', seen: false, showO:true,level:'&#xe600;',
                content:'<p>一, 人体舒适度指数（Body Comfort Meteorology Index,BCMI） 人们可根据当天的指数预报适当地安排室外的生产或活动以及如何防范冷热突变，加强自我保健。</p><hr/> <p>二, 计算公式为：k = (1.8t + 32) - 0.55 X (1 - rh) X (1.8t - 26) - 3.2√v  <br/>如果0<=k<=65， BCMI = k*100/65。 <p>如果65&lt;K&lt;=100，BCMI = 100 - 100 / 35 * ( K - 65 ) </p>  </p> <hr/> <p> 三, 公式中，t为空气温度（°C），rh为空气相对湿度（计算时取消百分制），v为环境风速（m/s）,K为人体舒适度气象指数（无量纲）</p>', 
                seen1: false},
                {name:'度假指数', backG : 'two', seen: false,   showO:true,level:'&#xe62d;',
                content:'<p>一, 度假指数 (Holiday Climate Index, HCI) 度假气候指数综合考虑了多种气候因子（气温，湿度，降雨，云量。风速等）对旅游者出行及旅游心态的共同影响</p> <hr/> <p>二, 公式为HCI = 4T + 2A + 3R + W ,式中T，A，R，W分别为有效温度，天空云覆盖率，降水和风速等气候因子的评判计分值</p>', 
                seen1: false},
                {name:'风寒指数', backG : 'three', seen: false, showO:true,level:'&#xe67d;',
                content:'<p>一, 风寒指数（Wind Chill Index, WCI），风寒指数是表征风速与降温关系的物理量 </p> <hr/> <p>二,  公式为 Q = (33 - t) X (9.0 + 10.9√v - v) ,公式中，t为空气温度（°C），rh为空气相对湿度（计算时取消百分制），v为环境风速（m/s）。<br/>如果Q<=400,WCI=100。<br/>如果Q>=2000,WCI=0。<br/>如果Q&lt;400&lt;2000，WCI= 100-100/1600*(Q-400)</p> ', 
                seen1: false},
                {name:'温湿指数', backG : 'four', seen: false,  showO:true,level:'&#xe62e;',
                content:'<p>一, 温湿指数（Temperature Humidity Index,THI），气温和气湿相结合用于估计炎热程度的一个综合指标 </p> <hr/> <p>二,  公式为 H = (1.8t + 32) - (0.55 - 0.55rh) X (1.8t - 26) ,公式中，t为空气温度（°C），rh为空气相对湿度（计算时取消百分制），v为环境风速（m/s）。<br/>如果0<=H<=62.5,THI = H*100/62.5。<br/> 如果62.5&lt;H&lt;=100, THI =  100-100/37.5*(H-62.5)</p>', 
                seen1: false}
                
            ],
            changeN:0,
            isContent:false
        }
    },
    methods: {
       handleBtnclick(index){
          this.isIndex = index
          if(this.btnList[index].seen ){
              
          }else{
              
          }
          if(index==1){
             this.changeN = 0
          }else if(index==2){
              this.changeN = 1
          }else if(index==3){
              this.changeN = 2
          }else if(index==4){
              this.changeN = 3
          }
          this.$store.commit('changeN', this.changeN)
       },
       showDetails(cur){
           for(var i = 0;i<this.btnList.length;i++){
               if(i!=cur){
                   this.btnList[i].seen1=false
               }
           }
           this.btnList[cur].seen1 = !this.btnList[cur].seen1
       },
        leave(){
            for(var i = 0;i<this.btnList.length;i++){
                this.btnList[i].seen1=false
           }
        }


    }
}
</script>
<style lang="stylus" scoped> 
    .btns
        position:absolute
        left:4.26rem
        top:7.96vh
        font-size:.14rem
        color:white
        z-index:5
        ul
            li
                margin-bottom:7px
                height: 25px
                .btnName
                    width:140px
                    text-align :center
                    line-height:25px
                    vertical-align :center
                    position :relative
                    .iconfont
                        font-size:20px
                        vertical-align :center
                    .contentDiv
                        width: 500px
                        padding: 20px
                        height: 300px
                        position:absolute
                        border:1px soild #ddd
                        background: rgba(7,23,42,0.7);
                        z-index:1000
                        text-align :left
                        top:0
                        left:140px
                .btnName:last-child
                    width:140px
                .one
                    background: #0CDE4E
                .two
                    background: #32F3A9
                .three
                    background: #63B5E6
                .four
                    background: #6AA6C9
                .five
                    background: #737373
                    
        .btn
            width: 30px
            height: 14px
            background: #737373
            margin-left:10px
            margin-top:6px
            border-top-left-radius:10px    
            border-top-right-radius:10px 
            border-bottom-left-radius:10px
            border-bottom-right-radius:10px
            overflow :hidden
            .onOff
                width:12px
                height: 12px
                float: right
                background: #fff
                margin-top: 1px
                margin-left: 1px
                margin-right: 1px
                border-radius: 50%
        .onOffActive
            background:#59E1FE
            .onOffG
                float:left
</style>


